<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/templates/templateLayout.xhtml">

	<f:metadata>
		<f:viewParam name="id" value="#{alquilerBean.id}" />
		<f:event type="preRenderView" listener="#{alquilerBean.inicio()}" />
	</f:metadata>

	<ui:define name="centerContent">
		<h:panelGroup layout="block"
			class="title ui-widget-header ui-corner-all"
			style="padding: 8px; font-size: 16px !important; text-align: center;">
			<h:outputText value="#{msgs['form.alquiler.detalle']}" />

			<h:form id="view">

				<p:panel id="panelView">
					<p:panelGrid id="panelFechaInquilino"
						style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="4">Datos</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column colspan="2">
								<h:outputLabel for="comboInquilino"
									value="#{msgs['form.inquilino']}: #{alquilerBean.entity.inquilino.apellidoNombre()}" />
							</p:column>							
						</p:row>
						<p:row>							
							<p:column>
							<h:outputLabel for="fechaInicio"
									value="#{msgs['form.fecini']}: " />
								<h:outputLabel id="fechaInicio"
									value="#{alquilerBean.entity.fechaInicio}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputLabel>
							</p:column>
							<p:column>
								<h:outputLabel for="fechaFin"
									value="#{msgs['form.fecfin']}: " />
								<h:outputLabel value="#{alquilerBean.entity.fechaFin}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputLabel>
							</p:column>
						</p:row>
					</p:panelGrid>

					<p:spacer />

					<p:panelGrid style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="5">Propiedad</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column>
								<h:outputLabel for="direccion"
									value="#{msgs['form.direccion']}: " />
							</p:column>
							<p:column>
								<h:outputLabel id="direccion" size="50"
									value="#{alquilerBean.entity.propiedad.direccion}" />
							</p:column>
							<p:column>
								<h:outputLabel for="numero"
									value="#{msgs['form.numero']}: " />
								<h:outputLabel id="numero"
									value="#{alquilerBean.entity.propiedad.numero}" />

							</p:column>
							<p:column>
								<h:outputLabel for="depto"
									value="#{msgs['form.depto']}: " />
								<h:outputLabel id="depto"
									value="#{alquilerBean.entity.propiedad.dpto}" />
							</p:column>
							<p:column>
								<h:outputLabel for="piso"
									value="#{msgs['form.piso']}: " />
								<h:outputLabel id="piso"
									value="#{alquilerBean.entity.propiedad.piso}" />

							</p:column>
						</p:row>
						<p:row>
							<p:column colspan="1">
								<h:outputLabel for="barrio"
									value="#{msgs['form.barrio']}: " />
							</p:column>
							<p:column>
								<h:outputLabel id="barrio"
									value="#{alquilerBean.entity.propiedad.barrio.descripcion}"
									size="50" />

							</p:column>
							<p:column colspan="3">
								<h:outputLabel for="zona" value="#{msgs['form.zona']}: " />
								<h:outputLabel id="zona"
									value="#{alquilerBean.entity.propiedad.barrio.zona}" size="50" />

							</p:column>
						</p:row>
					</p:panelGrid>

					<p:spacer />

					<p:dataTable id="tablaPeriodos" var="periodo"
						value="#{alquilerBean.entity.periodos}">
						<f:facet name="header">  
				            Periodos Alquiler  
				    	</f:facet>
						<p:column headerText="Nro" style="width:10%">
							<h:outputText value="#{periodo.nroPeriodo}" />
						</p:column>
						<p:column headerText="Meses" style="width:40%">
							<h:outputText value="#{periodo.periodo}" />
						</p:column>
						<p:column headerText="Monto" style="width:40%">
							<h:outputText value="#{periodo.monto}">
								<f:convertNumber currencySymbol="$" type="currency"
									maxFractionDigits="0" />
							</h:outputText>
						</p:column>


					</p:dataTable>

					<f:facet name="footer">
						<ui:include src="/templates/toolbarView.xhtml" />
					</f:facet>
				</p:panel>

			</h:form>
		</h:panelGroup>
	</ui:define>
</ui:composition>
</html>

